<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <style>
        * {
            font-size: 12px;

        }

        html,body {
            height: 100%;
        }

        .fade-in-left {
            animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
        }

        @keyframes fade-in-left {
            0% {
                transform: translateX(-50px);
                opacity: 0;
            }
            100% {
                transform: translateX(0);
                opacity: 1;
            }
        }

        .layui-panel {
            border-radius: 5px;
        }

        .form_item {
            width: 50%;
        }

        #feastList + .layui-form,.layui-border-box,.layui-table-view {
            margin: 0px !important;
        }

        .laytable-cell-radio {
            padding-top:15px;
        }

        .layui-table-tool {
            background-color: transparent;
        }
    </style>
</head>
<body class="fade-in-left" style="padding: 8px">
    <div class="layui-row">
        <div class="layui-col-md12">
            <div class="layui-panel" style="padding: 10px 20px 0px 0px">
                <div class="layui-main">
                    <fieldset class="layui-elem-field layui-field-title site-title">
                        <legend>
                            <p style="font-size: 20px;">添加参会人信息</p>
                        </legend>
                    </fieldset>

                    <form id="formBox" class="layui-form" action="">
                        <div class="layui-form-item form_item">
                            <label class="layui-form-label">参会人姓名</label>
                            <div class="layui-input-block">
                                <input type="text" name="attendName" required lay-verify="required" placeholder="请输入参会人姓名"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">参会日期</label>

                            <div class="layui-input-inline">
                                <input type="text" id="date" name="adate" required readonly lay-verify="required" placeholder="请选择日期"
                                       autocomplete="off" class="layui-input">
                            </div>

                            <div class="layui-form-mid">-</div>

                            <div class="layui-input-inline">
                                <input type="text" id="time" name="atime" required readonly lay-verify="required" placeholder="请选择时间"
                                       autocomplete="off" class="layui-input">
                            </div>

                        </div>
                        <%--宴会列表--%>
                        <div class="layui-form-item" style="">
                            <label class="layui-form-label">选择宴会</label>
                            <div class="layui-input-block">
                                <table id="feastList" lay-filter="flist"></table>
                            </div>
                        </div>

                        <div class="layui-form-item form_item">
                            <label class="layui-form-label">礼金</label>
                            <div class="layui-input-block">
                                <input type="number" name="acost" required lay-verify="required" placeholder="请输入礼金"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item form_item">
                            <label class="layui-form-label">关系</label>
                            <div class="layui-input-block">
                                <select required name="arelation" lay-verify="required" class="city" lay-verify="required">

                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">备注</label>
                            <div class="layui-input-block">
                                <textarea style="height: 50px; min-height: 50px" name="note" placeholder="备注" class="layui-textarea">请输入备注</textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div id="btnGroup" style="display: none" class="layui-input-block fade-in-left">
                                <button class="layui-btn" style="width: 150px" lay-submit lay-filter="addAttend">添加</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

<script type="text/html" id="toolbar">
    <div class="layui-input-inline">
        <input style="height: 30px;" type="text" placeholder="请输入宴会名" id="feastName" class="layui-input">
    </div>
    <button type="button" id="searchFeast" class="layui-btn layui-btn layui-btn-sm">
        <i class="layui-icon layui-icon-search"></i>
    </button>
</script>
<script src="../static/bootstrap-dist/js/jquery-3.5.1.js"></script>
<script src="../static/layui/layui.js"></script>
<script !src="">
    layui.use(['element', 'layer','laydate','table','form'], function () {
        let element = layui.element;
        let layer = layui.layer;
        let laydate = layui.laydate;
        let table = layui.table;
        let form = layui.form;
        let feast_id;

        laydate.render({
            elem: '#date',
            type: 'date'
        });

        laydate.render({
            elem: '#time',
            type: 'time'
        });

        let tableIns = table.render({
            elem : '#feastList'
            ,height: 280
            ,id :'diskId'
            ,url: 'feast' //数据接口
            ,where : {
                opr : 'list'
            }
            ,defaultToolbar: []
            ,toolbar : '#toolbar'
            ,limit : 10
            ,limits: [10, 15, 20]
            ,parseData: function (res) {
                return {
                    "code": 0,
                    "msg": "",
                    "count": res.totalCount,
                    "data": res.info
                }
            },
            text: {
                none: '未找到宴会'
            }
            ,page: true
            ,done : function (){
                $(".layui-table-view[lay-id='diskId'] .layui-table-body tr[data-index = '0'] .layui-form-radio").click();
                $("#btnGroup").show();
            }
            ,cols: [[
                {type:'radio'}
                ,{field: 'feastName',event:'onfName',templet:'#titleTpl', style: 'color : #2F4056;' ,title: '宴会名'}
                , {field: 'feastDate', title: '日期'}
                , {field: 'feastAddress', title: '地址'}
                , {field: 'feastCost', style:'color: goldenrod;',sort: true, title: '预算'}
                , {field: 'typeName', title: '宴会'}
            ]]
        });

        $("body").on("click", "#searchFeast", function(){
            feast_id = -1;
            table.reload('diskId', {
                // url :'feast',
                methods:"post"
                , request: {
                    pageName: 'page' //页码的参数名称，默认：page
                    ,limitName: 'limit' //每页数据量的参数名，默认：limit
                }
                , where: {
                    opr : "findByName",
                    fName : $("#feastName").val(),
                }
                , page: {
                    curr: 1
                },
            });
        });

        $.ajax({
            url : "rType",
            method : "post",
            data : {
                "opr" : "list"
            },
            dataType : "json",
            success : function (data){
                $(".city").empty();
                $(".city").append("<option value=''></option>");
                for (let i = 0; i < data.length; i++) {
                    $(".city").append("<option value=" + data[i].id + ">" + data[i].relationType + "</option>");
                }
                form.render("select");
            },
            error: function () {
                layer.alert("关系请求失败");
            }
        })

        //监听表格选择
        table.on('radio(flist)', function(obj){
            let data = obj.data;
            feast_id = data.id;
        });

        form.on('submit(addAttend)', function(data){
            if (feast_id < 0){
                layer.alert("未选择宴会");
            }else {
                let index;
                $.ajax({
                    url : "attendPeople",
                    method: "post",
                    data : {
                        "opr" : "add",
                        "aName" : data.field.attendName,
                        "aDate" : data.field.adate + " " + data.field.atime,
                        "feast" : feast_id,
                        "aCost" : data.field.acost,
                        "aRelation" : data.field.arelation,
                        "aNote" : data.field.note
                    },
                    dataType: "text",
                    beforeSend :function (){
                        index = layer.load(3);
                    },
                    complete: function () {
                        layer.close(index);
                    },
                    success : function (data){
                        if (data == "true"){
                            layer.alert("添加参会人成功",{icon: 1})
                            $("#formBox")[0].reset();
                            tableIns.reload();
                        }else {
                            layer.alert("添加参会人失败,请重试")
                        }
                        feast_id = 0;
                    },
                    error : function (){
                        layer.alert("关系请求失败");
                    }
                })
            }

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    })
</script>
</body>
</html>
